<template>
  <div class="rule">
    <a-row type="flex" class="self-row">
      <a-col :span="8" class="slef-col" v-for="item in list" :key="item.id">
        <div class="item">
          <div class="self-header">
            <div class="time">
              <p>人工客服在线时间：{{item.kefuOnlineTime}}</p>
              <p>电话客服在线时间：{{item.kefuPhoneTime}}</p>
            </div>
            <div class="action">
              <a @click="showForm(item)" class="ml-10">编辑</a>
              <a @click="deleteService(item,4)" class="ml-10">删除</a>
            </div>
          </div>
          <div class="title">适用小程序</div>
          <div class="wechat">
            <span v-for="(child,childIndex) in getBrands(item.brandId)" :key="childIndex">{{child.name}}</span>
            
          </div>
        </div>
      </a-col>
      
      <a-col :span="8" class="slef-col">
        <div class="item add" @click="showForm(null)">
          <a-icon type="plus" class="icon-add" />
            <span>新增客服规则模板</span>
        </div>
      </a-col>
    </a-row>
    <a-modal v-if="visible" v-model="visible" width="60%" :title="showTitle+'客服规则模板'" :footer="null">
      <create @close="close" :info="info" />
    </a-modal>
  </div>
</template>
<script>
import create from './form'
import { brands } from '../../util/brand'
import { getConfig,deleteCustomService } from '@/api/micromall'
export default {
  name: 'rule',
  components:{create},
  data(){
      return {
          visible:false,
          showTitle:'新增客服规则模板',
          info:{},
          list:[]
      }
  },
  computed:{
    getBrands(){
      return function(ids){
        ids = JSON.parse(ids)
        const list = brands.filter(item =>ids.indexOf(item.weid) != -1)
        return list
      } 
    }
  },
  mounted(){
    this.getList()
  },
  methods:{
     deleteService(record,type){
       this.$confirm({
        title: '确认删除该规则吗?',
        content:'删除后，使用该规则的小程序将丢失客服工作时间等信息',
        cancelText: '暂不',
        onOk: res => {
          console.log(res)
          return new Promise((resolve, reject) => {
            deleteCustomService({id:record.id,type})
              .then(res => {
                console.log(res)
                if (res.code == 200) {
                  this.getList()
                  this.$message.success('删除成功')
                  resolve()
                } else {
                  this.$message.success(res.msg)
                  reject()
                }
              })
              .catch(err => {
                resolve()
                console.log(err)
              })
          }).catch(() => console.log('Oops errors!'))
        },
        onCancel() {}
      })
      
    },
      showForm(record){
          this.visible = true
          this.info = record
          if(record == null){
        this.showTitle = '新增'
      }else{
        this.showTitle = '编辑'
      }
      },
      close(){
          this.visible = false
          this.info = {}
          this.getList()
      },
      async getList(){
        const re = await getConfig()
        if(re.code == 200){
          this.list = re.data
        }else{
          this.$message.error(re.msg)
        }
      },
  }
}
</script>
<style scoped>
.slef-col {
  padding: 10px;
  align-items: stretch;
}
.action{
   display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.rule {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.self-card:not(:first-child) {
  margin-left: 20px;
}
.ml-10 {
  margin-left: 10px;
}
.item:not(:first-child) {
  margin-left: 20px;
}
.item {
    height: 100%;
  /* height: 200px; */
  border: 1px solid #ededed;
  border-radius: 6px;
  padding: 10px;
}
.add {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.self-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.item p {
  margin: 0;
  padding: 0;
  line-height: 30px;
}
.title {
  font-size: 16px;
  font-weight: 600;
  line-height: 40px;
}
.wechat {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.wechat span {
  font-size: 14px;
  margin-left: 5px;
}
.icon-add{
    font-size: 30px;
    margin-bottom: 20px;
}
.self-row{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: stretch;
}
</style>
